<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的首页 微博-注册</title>
  <link rel="shortcut icon" href="/static/img/about_UI/favicon.ico" />
  <link rel="bookmark" href="/static/img/about_UI/favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" href="/static/plugins/Font-Awesome-master/css/font-awesome.css">
  <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
  <script type="text/javascript" src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "Arial","Microsoft YaHei",serif;

        }
        body{
            background-image: url("/static/img/about_UI/for_register.png");
        }
        .WB_register{
            border: 1px solid rgba(192,192,192,0.5);
            background-color: whitesmoke;
            width: 459px;
            margin: 50px auto ;
            /*padding: 20px;*/
            color: aliceblue;
        }
        .input-group{
            padding-bottom: 13px;
            margin:0 20px;
            /*height: 40px;*/
            /*border-bottom: 1px solid rgba(192,192,192,0.5);*/
        }
        .logo{
            width: 459px;
            height: 90px;
            background-image: url("/static/img/about_UI/WB_logo.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 62% 62%;
            /*border: 1px solid red;*/
        }
        .form-control{
            height: 40px;
        }
        .btn,.btn-default{
            margin: 0 auto;
            color: aliceblue;
            background-color: orangered;
            width:415px;
            margin-left: 20px;
        }

  </style>

</head>

<body>
    <div style="width: 1366px;">

        <!-- 此为注册 -->
        <div class="WB_register">
            <div class="logo"></div>
            <div style="width: 459px;text-align: center;color: coral;font-size: 18px;"><span>教给我们如何在人群中发现你?</span></div>


          <!--此为用户名-->
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                <input  type="text" class="form-control"  placeholder="Username/用户名" name="username">
              </div>
              <!--此为注册邮箱-->
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                <input  type="email" class="form-control"  id="exampleInputEmail1" placeholder="Email/邮箱" name="email">
              </div>
              <!--此为验证码-->
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-check-square fa-fw"></i></span>
                <input type="text"  id="exampleInputCheckCode" class="form-control" style="width: 240px;margin-right: 4px;" placeholder="VerificationCode/验证码" name="email_code">

                <button style="width: 130px;margin-left: 0;height: 40px;" id="send_code" class="btn btn-default" onclick="SendCode(this);">获取验证码</button>
              </div>
              <!--此为密码-->
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                <input  type="password" class="form-control"  placeholder="Password/密码" name="password">
              </div>

              <button onclick="SubmitRegister(this);" class="btn btn-default" style="margin-bottom: 15px;">注册</button>

            <div style="width:459px;height:40px;text-align:center;line-height:40px;background-color: rgb(246,246,246);">
                <span style="color: #0f0f0f;">已有账号?</span>
                <a onclick="Change(this);" style="text-decoration: none;cursor: pointer;">登陆</a>
            </div>


        </div>

    </div>
    <script type="text/javascript" >
        function Change(ths) {
            // alert("hahaha");
            $.ajax({
                url: "/register/",
                type: "GET",
                data: "",
                success:function(arg) {
                  location.href="/login/";
                }
            })
        }

        function SendCode(ths) {
            var email = $('#exampleInputEmail1').val();
            if(email == ""){
                alert("您的邮箱为空");
            }

            //提示用户邮箱并且发送AJax
            $.ajax({
                // async: false,
                url:"/send_code/", //发送到的地方
                type:"POST",
                data:{"email": email},//默认值为字符串,如果是其它格式需要转换
                success:function (arg) {
                    //判断后端返回的数据中status是否有问题,如果有问题,则进入xx操作,否则如下操作
                    //发送数据成功之后去做两件事情
                    //第一 设计计时器的状态(当没有出现因为邮箱重复而引发的一系列的问题时)
                    //第二 设置并提示给用户错误的信息是什么(当status为错误时)

                    var obj = JSON.parse(arg);
                    console.log(obj);

                    if(obj.status){
                        //会重新刷新页面,像render一样,感觉还是不错的
                        // location.href = "/register/";
                        settime(ths,30);//为什么出现无法调用的情况
                        console.log("success!");
                    }
                    else{
                        // console.log(obj.error);
                        var obj1=$('#exampleInputEmail1');
                        obj1.val(obj.error);
                        obj1.css('color','red');
                    }
                }

            });



        }

        //var time = 3;
        function settime(ths,timer){
            //设置逗留时间
            if(timer == 0){
                ths.removeAttribute("disabled");
                // $('#send_code').html("重新获取验证码");
                $(ths).html("重新获取验证码");
                // time = timer;
                return;
            }else {
                ths.setAttribute("disabled", true);
                content = "<i class=\"fa fa-spinner fa-pulse\"></i>已发送("+timer+"s)";
                // $('#send_code').html(content);
                $(ths).html(content);
                timer --;
            }
            setTimeout(function() {
                    settime(ths,timer);
                },1000);//过1秒执行一次左边的函数
        }


        function SubmitRegister(ths) {

            var post_dict = {};
            $('.form-control').each(function() {
              var input_value = $(this).val();
              var name_value = $(this).attr('name');
              post_dict[name_value] = input_value;
            });

            console.log(post_dict);

            post_dict_str = JSON.stringify(post_dict);

            $.ajax({
                // async:false,
                url: '/register/',
                type: 'POST',
                data: {'reg_data':post_dict_str},
                dataType:"json",
                success:function (arg) {

                    //当使用json.dumps的时候,返回来的就是json对象,因此下面这句就是有问题的
                    // var obj = JSON.parse(arg);

                    console.log(arg,typeof(arg));

                    if(arg.status){
                       console.log("您已成功注册微博,即将进入个人页面.");
                       location.href = "/username";
                       // 状态成功之后链接到某个页面(即登陆界面登陆后进入的界面,否则输出错误信息并放到相应的位置上
                    }else{
                       console.log(arg.error);
                       console.log("aaaaaaaaaaaaaaaaaa");
                       //$('#send_code').html();
                        obj2=$('#exampleInputCheckCode');
                        obj2.val(arg.error);
                        obj2.css('color','red');
                    }
                }

            })
        }




    </script>


</body>
</html>